import React from 'react'
import "./index.css"
export default function Footer({ todoList, setTodoList }) {
  // 当List数量改变时,Footer数字发生改变
  // 同样是将数据{ todoList, setTodoList }传给父组件,在通过父组件传递给兄弟组件
  // 封装一个函数,计算成功数据的个数
  // 用到累加reduce方法.第一个参数p是上一次的值,0是初始值
  // 如果c.done为true说名打勾了,加一,否则不变
  const getCheckedNum = () => {
    // return todoList.reduce((p,c)=>{
    //   if(c.done){
    //     return p+1
    //   }else{
    //     return p
    //   }
    // })
    // 简写方式
    return todoList.reduce((p, c) => c.done ? p + 1 : p, 0)
  }


  //全选逻辑
  // 只要判断已完成数量等于全部数量就说明是全选了getCheckedNum() === todoList.length 
  // 删除完成之后需要清除 全选前面的那个小对勾 todoList.length !== 0

  //全部选中的多选框选择事件函数
  const checedAllHandle = (e) => {
    // console.log(e.target.checked);   e.target.checked打印为true
    const expChecked = e.target.checked;
    // 定义一个我希望的状态 expChecked

    const newTodoList = todoList.map((item) => {
      return { ...item, done: expChecked }
      // 点击后遍历数组,将所有元素的done变为我希望的状态
    })

    setTodoList(newTodoList)
  }

  //清除所有已完成事件回调函数
  // 同样是遍历数组,用过滤的方法来判断,
  // 如果item.done为true就删除也就是return一个false,不往新数组里面放,
  //如果item.done为false,说明没勾上,则不删,就返回一个true,放到型数组中
  const deleteAllHandle = () => {
    const newTodoList = todoList.filter(item => !item.done);
    setTodoList(newTodoList);
  }

  return (
    <div className="todo-footer">
      <label>
        {/* checked属性是多选框默认选中状态 */}
        <input type="checkbox" onChange={checedAllHandle} checked={getCheckedNum() === todoList.length && todoList.length !== 0} />
      </label>
      <span>
        {/* 这里数量的显示就通过数组的length来判断了 */}
        <span>已完成{getCheckedNum()}</span> / 全部{todoList.length}
      </span>
      <button className="btn btn-danger" onClick={deleteAllHandle}>清除已完成任务</button>
    </div>
  )
}


